import { ref, onMounted, onUnmounted } from 'vue'
import { throttle } from '@/utils/throttle'

export function useScroll(e) {
  const y = ref(0)
  const x = ref(0)

  const updateY = () => {
    y.value = e.scrollY
    x.value = e.scrollX
  }

  onMounted(() => {
    e.addEventListener('scroll', throttle(updateY, 500))
  })

  onUnmounted(() => {
    e.removeEventListener('scroll', throttle(updateY, 500))
  })

  return { x, y }
}